@charset 'utf-8';
$fontsize:40;
@function r($px) {
    @return $px/($fontsize)* 1rem;
}

html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
}

header {
    height: r(191);
    width: 100%;
    background: white;
    position: absolute;
    top: 0;
    div {
        vertical-align: middle;
    }
    .left {
        float: left;
        margin-left: r(30);
        margin-top: r(48);
        input {
           width: r(122);
            height: r(55);
            background: transparent;
            vertical-align: top;
            font-size: r(25);
            border: 1px solid #ff9344;
            border-radius: r(15);
        }
    }
    
    .selectBar {
        border: 1px solid #ff9344;
        float: right;
        margin-top: r(48);
        margin-right: 11px;
        width: r(158);
        height: r(56);
        background: url(../img/9.jpg) no-repeat right r(10) center;
        background-size: r(30) r(16);
        select {
            width: r(158);
            height: r(56);
            padding-left: r(14);
            font-size: r(25);
            outline: none;
            border: none;
            appearance: none;
            -webkit-appearance: none;
            background: transparent;
            vertical-align: top;
        }
    }
    .center{
        text-align: center;
        width: r(100);
        height: r(100);
        line-height: r(150);
        vertical-align: middle;
        margin: 0 auto;

        p{
        font-size: r(25);

        
        }
    }
    .bottom{
       width: r(269);
        height: r(50);
        line-height: r(50);
        border: 1px solid #ff9344;
        border-radius: r(25);
        padding-left:r(22);
        box-sizing: border-box;
        margin: 0 auto;
        margin-top: r(36);
        input {
            width: r(180);
            height: 100%;
            border: none;
            vertical-align: top;
            font-size: r(24);
            line-height: r(50);
            outline: none;
        }
        i {
            font-size: r(28);
            color: #ff9344;
            vertical-align: text-top;
        }
    }
}

footer {
    width: 100%;
    height: r(136);
    background: white;
    position: absolute;
    bottom: 0;
    ul {
        li {
            margin-top: r(16);
            float: left;
            width: 25%;
            height: 100%;
            text-align: center;
            a {
                color: black;
            }
            .iconfont {
                font-size: r(70);
                color: transparent;
                -webkit-text-stroke: r(1) #ff9344;
            }
            p {
                font-size: r(26);
            }
            &.active .iconfont {
                color: #FF9344;
            }
        }
    }
}

section{
    width: 100%;
    position: absolute;
    top: r(191);
    bottom: r(136);
    overflow-y: scroll;
    .top{
        margin-top: r(34);
        text-align: center;
        
        p{
            font-size: r(26);
            margin-bottom: r(26);
        }
        ul{
            width: 70%;
            margin: 0 auto;
            li{
                float: left;
                width: 24%;
                background: #dcdcdc;
                font-size: r(20);
                line-height: r(63);
                margin-right: r(5);
                margin-bottom: r(3);
                a{
                width: r(124);
                height: r(63);
                color: #000000;
                }
            }
        }
    }
    .navigation {
        margin: 0 auto;
        width: 95%;
        margin-top: r(45);
        .left {
            width: 50%;
            line-height: r(59);
            img {
                width: r(56);
                height: r(54);
                vertical-align: middle;
            }
            p {
                font-size: r(30);
                display: inline-block;
                vertical-align: middle;
            }
        }
        .right {
            width: 50%;
            text-align: right;
            line-height: r(59);
            a {
                color: black;
            }
            p {
                font-size: r(24);
                display: inline-block;
            }
            .iconfont {
                font-size: r(24);
                color: #FF9344;
            }
        }
    }
    .center{
        width: 95%;
        margin: 0 auto;
        margin-top: r(32);
        .left{
            width: 40%;
            img{
                width: r(278);
                height: r(351);
            }
        }
        .right{
            width: 60%;
            img{
                width: r(419);
                height: r(146);
            }
            .right_bottom{
                img{
                    width: r(203);
                    height: r(190);
                    
                }
            }
        }
    }
    .bottom{
        width: 95%;
        margin: 0 auto;
        margin-top: r(48);
        ul{
            li{
                float: left;
                width: 33%;
                text-align: center;
                img{
                    width: r(210);
                    height: r(199);
                }
            }
        }
    }
}